<template>
    <view>
        <u-navbar placeholder>
            <view slot="left">
				<u-text text="软件" size="18" bold></u-text>
            </view>
            <view slot="center">                
            </view>
			<view slot="right" @click="GoSearch">
				<u-icon name="search" size="24" bold></u-icon>
			</view>
        </u-navbar>
        <mescroll-body ref="mescrollRef" :down="downOption" :up="upOption" beforeEndDelay="2000" @init="mescrollInit"
            @down="downCallback">
            <view class="banner">
                <u-swiper :list="list" keyName="adimgurl" duration="666" interval="6000" autoplay
                    circular radius="10px" @click="GoLink" showTitle  indicator  previousMargin="0" nextMargin="0"  indicatorMode="dot" height="168" bgColor="rgba(00,00,00,0)">
                </u-swiper>
            </view>
            <view class="notice">
                <u-notice-bar icon="volume" :text="AppGg" bgColor="rgba(00,00,00,0)" fontSize="16" color="#2469f6">
                </u-notice-bar>
            </view>
            <view class="appmsg">
                <view class="allview">
                    <u-image src="/static/common/appview.png" width="98rpx" height="98rpx"></u-image>
                    <view class="rightmsg">
                        <u-text :text="AppInfo.rhappview" size="21" bold></u-text>
                        <u-text text="总访问量" color="#888888" size="13" bold></u-text>
                    </view>
                </view>
                <view class="qqmsg">
                    <u-image src="/static/common/online.png" width="98rpx" height="98rpx" loadingIcon="hourglass">
                    </u-image>
                    <view class="rightmsg">
                        <u-text :text="AppInfo.rhusernum" size="21" bold></u-text>
                        <u-text text="用户总数" color="#888888" size="13" bold></u-text>
                    </view>
                </view>
            </view>
            <view class="sort">
                <u-text text="资源分类" size="20" color="#555555" bold></u-text>
                <view class="sortbody">
                    <block v-for="(sort, sortindex) in SortList" :key="sortindex">
                        <view class="sortinfo" @tap="GoSortList(sort.id,sort.sortname)">
                            <u-image :src="sort.sorticon" width="78rpx" height="78rpx" radius="10" loadingIcon="hourglass">
                            </u-image>
                            <view class="sortmsg">
                                <u-text :text="sort.sortname" size="16" color="#555555"></u-text>
                                <!-- <view style="margin-top: 8rpx;">
                                    <u-text :text="sort.classdetail" size="12" color="#888888"></u-text>
                                </view> -->
                            </view>
                        </view>
                    </block>
                </view>
            </view>
        </mescroll-body>
        <u-no-network @disconnected="disconnected" @connected="connected" @retry="retry"></u-no-network>
    </view>
</template>
<script>
    import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
    import API from '../../util/request.js';
    export default {
        mixins: [MescrollMixin],
        data() {
            return {
                list: [],
                AppGg: '',
                AppInfo: '',
                SortList: [],
                downOption: {
                    use: true, // 是否启用下拉刷新; 默认true
                    auto: true, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
                    native: false, // 是否使用系统自带的下拉刷新; 默认false; 仅mescroll-body生效 (值为true时,还需在pages配置enablePullDownRefresh:true;详请参考mescroll-native的案例)
                    autoShowLoading: false, // 如果设置auto=true(在初始化完毕之后自动执行下拉刷新的回调),那么是否显示下拉刷新的进度; 默认false
                    isLock: false, // 是否锁定下拉刷新,默认false;
                    offset: 70, // 在列表顶部,下拉大于80upx,松手即可触发下拉刷新的回调
                    inOffsetRate: 1, // 在列表顶部,下拉的距离小于offset时,改变下拉区域高度比例;值小于1且越接近0,高度变化越小,表现为越往下越难拉
                    outOffsetRate: 0.2, // 在列表顶部,下拉的距离大于offset时,改变下拉区域高度比例;值小于1且越接近0,高度变化越小,表现为越往下越难拉
                    bottomOffset: 20, // 当手指touchmove位置在距离body底部20upx范围内的时候结束上拉刷新,避免Webview嵌套导致touchend事件不执行
                    minAngle: 45, // 向下滑动最少偏移的角度,取值区间  [0,90];默认45度,即向下滑动的角度大于45度则触发下拉;而小于45度,将不触发下拉,避免与左右滑动的轮播等组件冲突;
                    beforeEndDelay: 400, // 延时结束的时长 (显示加载成功/失败的时长, android小程序设置此项结束下拉会卡顿, 配置后请注意测试)
                    bgColor: "#f9f9f9", // 背景颜色 (建议在pages.json中再设置一下backgroundColorTop)
                    textColor: "#2469f6", // 文本颜色 (当bgColor配置了颜色,而textColor未配置时,则textColor会默认为白色)
                    textInOffset: '下拉刷新', // 下拉的距离在offset范围内的提示文本
                    textOutOffset: '释放更新', // 下拉的距离大于offset范围的提示文本
                    textLoading: '加载中 ...' // 加载中的提示文本
                },
                upOption: {
                    use: false, // 是否启用上拉加载; 默认true
                    auto: false, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
                    isLock: false, // 是否锁定上拉加载,默认false;
                },
            }
        },
        methods: {
            onload(e) {
                // console.log("onload");
            },
            onclose(e) {
                // console.log("onclose: " + e.detail);
            },
            onerror(e) {
                console.log(e);
            },
            //下拉刷新
            downCallback() {
                var that =this;
                // console.log(API.GetAds())
				uni.request({
					url: API.getads()+'1',
					success: res => {
						var adlist = JSON.parse(that.AES.decrypt(res.data, API.JmKey(), API.JmIv()));
						that.list = adlist.data;
						uni.request({
							url: API.GetAppInfo(),
							success: res => {
								var data = JSON.parse(that.AES.decrypt(res.data, API.JmKey(), API.JmIv()))
								that.AppInfo = data.data;
								that.AppGg = data.data.rhappmsg
								uni.setStorageSync('qqgroup', data.data.rhqun);  
								uni.request({
									url: API.GetApkClass(),
									success: res => {
										var datas = JSON.parse(that.AES.decrypt(res.data, API.JmKey(), API.JmIv()));
										that.SortList = datas.data
										that.mescroll.endSuccess(datas);                  
									}
								})
							}
						})
					}
				})
            },
            //轮播跳转
            GoLink: function(e) {
                plus.runtime.openURL(this.list[e].adlink)
            },
			
			//跳转搜索页
			GoSearch(){
				uni.navigateTo({
					url:'/pages/commen/search'
				})
			},
            //跳转分类详情
            GoSortList: function(e,name) {
                // console.log(e)
                uni.navigateTo({
                    url: '/pages/ruanher/ruanherlist?id=' + e+'&name='+name
                })
            },
            //无网络
            disconnected() {
                console.log('disconnected');
            },
            connected() {
                // console.log('connected');
            },
            retry() {
                console.log('retry');
            }
        }
    }
</script>
<style lang="scss">
    //轮播图
    // .banner {
    //     margin: 30rpx;
    // }

    //公告
    .notice {
        padding: 10rpx;
        margin: 0rpx 20rpx 0rpx 20rpx;
        border-radius: 20rpx;
        background-color: #ffffff;
        // box-shadow: 1rpx 1rpx 15rpx rgba(200, 200, 200, 0.1);
    }

    //软件数据
    .appmsg {
        display: flex;
    }

    .allview {
        @include flex(row);
        flex: 1;
        border-radius: 20rpx;
        // height: 128rpx;
        margin: 20rpx 20rpx 0rpx 20rpx;
        background-color: #fff;
        align-items: center;
        // box-shadow: 1rpx 1rpx 12rpx rgba(200, 200, 200, 0.1);
        padding: 10rpx;
    }

    .qqmsg {
        @include flex(row);
        flex: 1;
        border-radius: 20rpx;
        // height: 118rpx;
        margin: 30rpx 30rpx 0rpx 0rpx;
        background-color: #fff;
        align-items: center;
        // box-shadow: 1rpx 1rpx 15rpx rgba(200, 200, 200, 0.1);
        padding: 10rpx;
    }

    .rightmsg {
        flex: 2;
        margin-left: 10rpx;
    }

    //版块列表
    .sort {
        margin: 20rpx 20rpx;
        border-radius: 20rpx;
        padding: 30rpx;
        background-color: #ffffff;
        // box-shadow: 1rpx 1rpx 15rpx rgba(200, 200, 200, 0.3);
    }

    .sortbody {
        margin-top: 10rpx;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
    }

    .sortinfo {
        @include flex(row);
        width: 50%;
        padding-top: 26rpx;
    }

    .sortmsg {
        margin-left: 16rpx;
        margin-top: 4rpx;
    }
</style>
